const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const getStyleLoaders = (preProcessor) => {
    return [
        MiniCssExtractPlugin.loader,//使用 MiniCssExtractPlugin 就不在需要使用style-loader了 使用miniCssExtractPlugin.loader提取单独的 Css 文件，通过 link 标签提升加载性能。 style-loading 会僵CSS 被插入到 html style标签 中
        "css-loader",
        {
            loader: "postcss-loader",
                options: {
                    postcssOptions: {
                        plugins: [
                            "postcss-preset-env", // 能解决大多数样式兼容性问题
                        ],
                    },
                },
        },
        preProcessor,
    ].filter(Boolean);//filter(Boolean): 这个函数会过滤掉数组中的 falsey 值（例如 undefined、null、
                      // 0、"" 等），只留下 truthy 值。这确保了返回的数组中没有无效的 loader。
};
module.exports = {
    entry: './src/main.js',
    output: {
        // path: 文件输出目录，必须是绝对路径
        // path.resolve()方法返回一个绝对路径
        // __dirname 当前文件的文件夹绝对路径
        // path: path.resolve(__dirname, 'dist'),      
        path: undefined,  // 开发模式没有输出，不需要指定输出目录
        filename: 'app.js'
    },
    module: {
        rules: [
            {
                // 用来匹配 .css 结尾的文件
                test: /\.css$/,
                // use 数组里面 Loader 执行顺序是从右到左
                use: getStyleLoaders(),
              },
              {
                test: /\.s[ac]ss$/,
                use: getStyleLoaders("sass-loader"),
              },

            {
                test: /\.(js|jsx)$/, // 匹配 js 和 jsx 文件
                exclude: /node_modules/, // 排除 node_modules 目录
                use: {
                  loader: 'babel-loader',
                },
            },
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "../public/index.html"),
          }),
          new MiniCssExtractPlugin({
            // 定义输出文件名和目录 开发模式不会指定文件目录
            // filename: "static/css/main.css",
            filename: "main.css"
          }),
    ],
    resolve: {
        extensions: [".jsx", ".js", ".json"], // 自动补全文件扩展名，让jsx可以使用
        alias: {
          // 路径别名
          "@": path.resolve(__dirname, "../src"),
        },
    },
    mode: "development",
}